@keyframes vv--add {
    0% { background-color: rgba(0 0 0 / 0%); }
   25% { background-color: rgba(0 255 0 / 50%); }
  100% { background-color: rgba(0 0 0 / 0%); }
}
@keyframes vv--update {
    0% { background-color: rgba(0 0 0 / 0%); }
   25% { background-color: rgba(0 0 255 / 50%); }
  100% { background-color: rgba(0 0 0 / 0%); }
}
@keyframes vv--remove {
    0% { background-color: rgba(0 0 0 / 0%); }
   25% { background-color: rgba(255 0 0 / 50%); }
  100% { background-color: rgba(0 0 0 / 0%); }
}
@media screen and (max-width: 1000px) {
    body #vv--root {
        top: var(--topBarBlockSize);
        width: 100svw;
        max-width: 100svw;
        .vv--action {
            font-size: 1.5em;
        }
    }
}
#vv--root {
    // draggable
    width: calc((100vw - var(--sheldWidth)) / 2);
    filter: drop-shadow(1px 1px 2px var(--black50a));
    overflow: hidden;
    bottom: 0;
    border-radius: 10px;
    border: 1px solid var(--SmartThemeBorderColor);
    aspect-ratio: unset;
    backdrop-filter: blur(var(--SmartThemeBlurStrength));
    background-color: var(--SmartThemeBlurTintColor);
    padding: 5px;
    // end of draggable

	display: flex;
    max-height: calc(100vh - var(--topBarBlockSize));
    max-height: calc(100svh - var(--topBarBlockSize));
    position: fixed;
    margin: 0;
    top: var(--topBarBlockSize);
    right: 0;
    left: unset;
    padding-top: 25px;
    flex-flow: column;
    color: var(--SmartThemeBodyColor);
    z-index: 30;
    &.vv--maximized {
        width: 100vw;
    }

    > .vv--fontSizeUp {
        cursor: pointer;
        font-weight: bold;
        position: absolute;
        left: 15px;
        top: 5px;
        opacity: 0.5;
        &:hover {
            opacity: 1;
        }
    }
    > .vv--fontSizeDown {
        cursor: pointer;
        font-weight: bold;
        position: absolute;
        left: 35px;
        top: 5px;
        opacity: 0.5;
        &:hover {
            opacity: 1;
        }
    }
    > .vv--maximize {
        cursor: pointer;
        font-weight: bold;
        position: absolute;
        left: 55px;
        top: 5px;
        opacity: 0.5;
        &:hover {
            opacity: 1;
        }
    }

    > .vv--move {
        position: absolute;
        right: 35px;
        top: 3px;
    }

    > .vv--close {
        cursor: pointer;
        font-weight: bold;
        position: absolute;
        right: 15px;
        top: 5px;
    }

    > .vv--content {
        overflow: auto;
        > .vv--entry {
            margin: 0.5em 0.25em;
            padding-bottom: 0.25em;
            &:has(+.vv--entry) {
                border-bottom: 1px solid silver;
                padding-bottom: 0.75em;
            }
            > .vv--title {
                display: flex;
                flex-direction: row;
                font-weight: bold;
                gap: 1em;

                > .vv--add, > .vv--copy {
                    cursor: pointer;
                    opacity: 0.5;
                    &:hover {
                        opacity: 1;
                    }
                }

                > .vv--flushAll {
                    cursor: pointer;
                    opacity: 0.5;
                    position: relative;
                    &:hover {
                        opacity: 1;
                    }
                    > .vv--first {
                        display: inline-block;
                    }
                    > .vv--second {
                        display: inline-block;
                        transform: scaleX(-1);
                        margin-left: -5px;
                    }
                }
            }
            > .vv--vars {
                // display: grid;
                // gap: 1em;
                // grid-template-columns: 5fr 1000fr 0.1fr;
                > .vv--var {
                    border-left: 2px solid transparent;
                    transition: border-left-color 500ms;
                    &.vv--unsaved {
                        border-left-color: red;
                    }
                }
                .vv--var {
                    animation-duration: 2s;
                    animation-timing-function: linear;
                    animation-delay: 0s;
                    &.vv--add { animation-name: vv--add; }
                    &.vv--update { animation-name: vv--update; }
                    &.vv--remove { animation-name: vv--remove; }
                    &.vv--collapsed {
                        > .vv--head {
                            opacity: 0.5;
                        }
                        > .vv--body {
                            display: none;
                        }
                    }

                    .vv--var {
                        border-left: 2px solid var(--SmartThemeEmColor);
                        margin-left: 3px;
                        padding-left: 5px;
                        transition: border-left-color 500ms;
                        &.vv--unsaved {
                            border-left-color: red;
                        }
                    }
                    &[data-vv--type="[]"] > .vv--body > .vv--var:not(:has(.vv--var)) {
                        display: flex;
                    }

                    > .vv--head {
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        > .vv--label {
                            flex: 0 0 auto;
                            cursor: row-resize;
                        }
                        > .vv--type {
                            color: var(--SmartThemeEmColor);
                            margin-left: 0.5em;
                        }
                        > .vv--actions {
                            flex: 1 1 auto;
                            text-align: right;
                            white-space: nowrap;
                            > .vv--action {
                                cursor: pointer;
                                opacity: 0.5;
                                &.vv--mainAction {
                                    font-size: 1.5em;
                                }
                                &:hover {
                                    opacity: 1;
                                }
                            }
                        }
                    }
                    > .vv--body {
                        flex: 1 1 auto;
                        > .vv--val {
                            background-color: var(--black30a);
                            border: 1px solid var(--SmartThemeBorderColor);
                            border-radius: 5px;
                            padding: 2px;
                            flex: 1;
                            text-align: center;

                            animation-iteration-count: 1;

                            > textarea {
                                font-size: smaller;
                            }
                        }
                    }
                }
            }
        }
    }
}
